<template>
  <span>
    <el-popover :popper-style="{'max-height': '450px', 'overflow': 'scroll'}" placement="right" :width="650" trigger="click">
      <template #reference>
        <el-button color="#626aef" :dark="false" plain>附件【{{gridData.length}}】个</el-button>
      </template>
      <span style="float: right">
        <el-button color="#626aef" :dark="false" plain @click="preview">去预览</el-button>
      </span>
      <el-table :data="gridData" :height="auto">
        <el-table-column type="index" width="50" />
        <el-table-column property="fileName" label="文件名" />
        <el-table-column property="fileSizeInfo" label="大小" width="150" align="right" />
      </el-table>
    </el-popover>
  </span>
</template>

<script lang="ts" setup>
import {defineProps, ref} from "vue";
import {forEach} from "wangeditor/dist/utils/util";
import {getWebsitDomain} from "@/utils/utils";

const props = defineProps({
  periodId: {
    type: Number,
    default: 0, //默认值
    required: true //是否必传
  },
  attachments: {
    type: String, // 参数类型
    default: [], //默认值
    required: true //是否必传
  }
})
const gridData = ref([])
const arr = JSON.parse(props.attachments)
arr.forEach(function (item, index, array) {
  // item数组中的当前项, index当前项的索引, array原始数组；
  try {
    if (item.fileSize > 1024 * 1024) {
      item.fileSizeInfo = (item.fileSize / (1024 * 1024)).toFixed(2) + ' MB'
    } else {
      item.fileSizeInfo = (item.fileSize / (1024)).toFixed(2) + ' KB'
    }
  } catch (e) {
    console.log(e)
  }
})
gridData.value.push(...arr);

const preview = function() {
  const websiteDomain = getWebsitDomain()
  const url = websiteDomain + 'course/attachment/' + props.periodId;

  const newOpenWindow = window.open(url);
};
</script>
<style>
.maxH {
  max-height: 400px;
}
</style>
